.meetings-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #222;
    z-index: 141;

    &-debug {
        position: absolute;
        bottom: 15px;
        left: 15px;
        font: var(--text-h3);
        color: var(--secondary-white);
        opacity: 0.6;
    }

    &-content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font: var(--text-h3-bold);

        span {
            display: block;
            position: relative;
            width: 64px;
            height: 64px;
            margin: 0 auto;
            border-radius: 15px;
            background: var(--surface-error);

            i {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                --icon-size: 48px;
                --mask-color: #FFF;
            }
        }

        h2 {
            color: var(--secondary-white);
        }

        h3 {
            color: var(--secondary-white);
        }

        .loading-container {
            overflow: hidden;
            width: 320px;
            margin: 0 auto;
            border-radius: 50%;

            .loading-indication {
                position: relative;
                left: -400px;
                width: 250px;
                height: 2px;
                margin: 0 auto;
                background: rgba(240,55,58,0);
                background: linear-gradient(90deg, rgba(240,55,58,0) 0%, #F0373A 100%);
                animation: loading-animation 2s infinite;
            }
        }

        @keyframes loading-animation {
            0% {
                left: -400px;
            }

            100% {
                left: 400px;
            }
        }
    }
}
